<template>

  <view class=" w-full flex " :class="chatData.isMe ? 'flex-row-reverse' : 'flex-row'">
    <!-- 头像 -->
    <view class=" flex-center" style=" width: 60px;height: 60px;">
      <image style="width: 40px;height: 40px;border-radius: 5px;" :src="chatData.userAvatar" class="icon"></image>
    </view>
    <!-- 昵称 + 信息-->
    <view style="padding: 5px 0;" class="flex-1 flex flex-col " :class="chatData.isMe ? 'items-end' : 'items-start'">
      <text style="font-size: 14px; color: #999999;margin-bottom: 10px;">
        {{ chatData.userName }}{{ chatData.mobileNumber }}
      </text>
      <!-- 文本 -->
      <text v-if="chatData.msgType == 'text'" :style="chatData.isMe ? 'background: #7dda88' : 'background:#FFFFFF'"
        style="word-wrap: break-word;word-break: break-all;  box-shadow: 0px 4px 19px 1px rgba(51, 51, 51, 0.2);padding: 10px; max-width: 80%; box-sizing: border-box; border-radius: 10px;">
        {{ chatData.content }}
      </text>
      <!-- 图片 -->
      <image v-if="chatData.msgType == 'image'" mode="widthFix" :src="chatData.content" style="max-width: 50%;"
        @tap="handleViewClick(chatData)">
      </image>
      <!-- 视频 -->
      <video v-if="chatData.msgType == 'video'" controls :src="(chatData.content as string)"
        style="max-width: 50%;"></video>

      <!--地图-->
      <view class="chat_map flex" v-if="chatData.msgType == 'map'" @click="handleMapOverview(chatData)"
        style="max-width: 50%;">
        <image :src="setStaticMapUrl(chatData)" mode="widthFix" />
      </view>

      <!-- <view v-if="chatData.msgType == 'map'" style="max-width: 80%; overflow: hidden;">
        <map class="box" :latitude="(chatData?.content as ContentType).latitude"
          :longitude="(chatData?.content as ContentType).longitude"
          :markers="[{ id: 1, width: 40, height: 40, latitude: (chatData?.content as ContentType).latitude, longitude: (chatData?.content as ContentType).longitude, iconPath: '../../static/location.png' }]"></map>
      </view> -->
    </view>
  </view>
</template>

<script setup lang='ts'>
/**
 * 聊天内容展示组件
 */
import { GDMap_Service_Key } from '@/static'

interface Props {
  chatData: any;
  /** 聊天信息列表 */
};

type MsgTSType = {
  /** 信息是不是本人发送 */
  isMe: boolean,
  /** 用户姓名 */
  userName: string,
  /** 用户头像 */
  userAvatar: string,
  /** 用户手机号 */
  mobileNumber: string,
  /** 信息类型 text image video map */
  msgType: string,
  /** 信息内容 */
  content: string | ContentType,
}

interface ContentType {
  address: string,
  latitude: string,
  longitude: string,
}

const { chatData: { }, } = defineProps<Props>();

/** 图片预览 */
const handleViewClick = (e: any) => {
  wx.previewImage({
    current: '', // 当前显示图片的 http 链接
    urls: [e.content] // 需要预览的图片 http 链接列表
  })
}


function setStaticMapUrl(e: any) {
  let position = e?.content.latitude + ',' + e?.content.longitude
  const staticMap: string = 'https://apis.map.qq.com/ws/staticmap/v2/?center=' + position + '&zoom=14&markers=color:red|' + position + '&key=' + GDMap_Service_Key + '&size=640*256'
  return staticMap
}

/** 处理发送位置点击事件 */
function handleMapOverview(e: any) {
  debugger
  console.log('打开发送的位置信息', e);
  uni.openLocation({
    latitude: e?.content.latitude,
    longitude: e?.content.longitude,
    success: function () {
      console.log('success');
    }
  });

  // uni.openLocation({
  //   latitude: e.latitude,
  //   longitude: e.longitude,
  //   name: e.name,
  //   address: e.address,
  //   success: function () {
  //     console.log("success");
  //   },
  // });
}


</script>

<style lang='less' module>
</style>
